<template>
  <div>
    <Card>
      <Tables ref="tables" searchable search-place="top" :loading="listLoading" :columns="columns" v-model="list">
        <template slot="handleButton">
          <Button v-if="userManager_btn_add" type="primary" @click="handleAdd"><Icon type="md-add" />新增</Button>
        </template>
        <template slot="searchButton">
          <div style="float:right">
            <Input placeholder="输入关键字搜索" class="search-input" v-model="listQuery.path">
              <Button @click="getList" slot="append" type="info" icon="ios-search"></Button>
            </Input>
          </div>
        </template>
        <template slot="action" slot-scope="props">
          <Button v-if="userManager_btn_edit" type="primary" @click="handleUpdate(props)" size="small">编辑</Button>
          <Divider type="vertical" />
          <Poptip confirm title="永久删除数据?" transfer @on-ok="handleDelete(props)">
            <Button v-if="userManager_btn_del" type="warning" size="small">删除</Button>
          </Poptip>
        </template>
      </Tables>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: left;">
          <Page v-show="!listLoading" :total="total" :page-size-opts="[50,100,500,1000,2000]" :current="listQuery.page" show-total show-sizer :page-size="listQuery.limit" @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"></Page>
        </div>
      </div>
    </Card>
    <Modal :title="textMap[dialogStatus]" v-model="dialogFormVisible" :mask-closable='false' :width="500">
      <Form ref="form" :model="form" :label-width="90" :rules="rules">
        <FormItem label="映射路径" prop="path">
          <Input v-model="form.path"/>
        </FormItem>
        <FormItem label="映射服务" prop="serviceId">
          <Input v-model="form.serviceId"/>
        </FormItem>
        <FormItem label="映射物理地址" prop="url">
          <Input v-model="form.url"/>
        </FormItem>
        <FormItem label="是否重试" prop="retryable">
          <i-switch :value="form.retryable" :true-value="1" :false-value="0" @on-change="changeRetryable" />
        </FormItem>
        <FormItem label="是否启用" prop="enabled">
          <i-switch :value="form.enabled" :true-value="1" :false-value="0" @on-change="changeEnabled" />
        </FormItem>
        <FormItem label="是否忽略前缀" prop="stripPrefix">
          <i-switch :value="form.stripPrefix" :true-value="1" :false-value="0" @on-change="changeStripPrefix" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel('form')">取消</Button>
        <Button type="primary" v-if="dialogStatus=='create'" @click="create('form')">确 定</Button>
        <Button type="primary" v-else @click="update('form')">确 定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { mapGetters } from 'vuex'
import {
  page,
  addObj,
  getObj,
  delObj,
  putObj
} from '@/api/service/gatewayRoute/index'
import { getTypeValue } from '@/api/dict/dictValue/index'
export default {
  name: 'gatewayRoute',
  components: {
    Tables
  },
  data () {
    return {
      form: {
        path: undefined,
        serviceId: undefined,
        url: undefined,
        retryable: 0,
        enabled: 0,
        stripPrefix: 0
      },
      textMap: {
        update: '编辑',
        create: '创建'
      },
      appList: [
        { labelDefault: '仓储系统', value: 'WMS', id: 'WMS' },
        { labelDefault: '物流系统', value: 'TMS', id: 'TMS' },
        { labelDefault: '计费系统', value: 'BMS', id: 'BMS' },
        { labelDefault: '订单系统', value: 'OMS', id: 'OMS' },
        { labelDefault: '账户系统', value: 'Account', id: 'Account' }
      ],
      rules: {
        path: [
          {
            required: true,
            message: '请输入映射路径',
            trigger: 'blur'
          }
        ],
        serviceId: [
          {
            required: true,
            message: '请输入映射服务',
            trigger: 'blur'
          }
        ]
      },
      dialogStatus: '',
      baseSearchColumns: [
        { title: '姓名', key: 'name' },
        { title: '账户', key: 'username' }
      ],
      columns: [
        { title: '映射路径', key: 'path', align: 'center' },
        { title: '映射服务', key: 'serviceId', align: 'center' },
        { title: '映射外连接', key: 'url', align: 'center' },
        { title: '允许重试',
          key: 'retryable',
          align: 'center',
          render: (h, params) => {
            let content = '是'
            let color = 'primary'
            if (!params.row.retryable) {
              content = '否'
              color = 'warning'
            }
            return h('Tag', { props: { color: color } }, content)
          }
        },
        { title: '启用',
          key: 'enabled',
          align: 'center',
          render: (h, params) => {
            let content = '是'
            let color = 'primary'
            if (!params.row.enabled) {
              content = '否'
              color = 'warning'
            }
            return h('Tag', { props: { color: color } }, content)
          }
        },
        { title: '忽略前缀',
          key: 'stripPrefix',
          align: 'center',
          render: (h, params) => {
            let content = '是'
            let color = 'primary'
            if (!params.row.stripPrefix) {
              content = '否'
              color = 'warning'
            }
            return h('Tag', { props: { color: color } }, content)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              this.$refs.tables.$scopedSlots.action(params)
            )
          }
        }
      ],
      list: [],
      listQuery: {
        page: 1,
        limit: 50,
        path: undefined
      },
      listLoading: false,
      total: 0,
      current: 1,
      sexOptions: [],
      dialogFormVisible: false,
      dialogDepartVisible: false,
      userManager_btn_edit: false,
      userManager_btn_del: false,
      userManager_btn_add: false
    }
  },
  created () {
    this.getList()
    this.userManager_btn_edit = this.elements['gatewayManager:btn_edit']
    this.userManager_btn_del = this.elements['gatewayManager:btn_del']
    this.userManager_btn_add = this.elements['gatewayManager:btn_add']
    // getTypeValue('comm_sex').then(response => {
    //   this.sexOptions = response.data.rows
    // })
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    handlerAddDepart () {
    },
    openDepartDialog () {
      this.dialogDepartVisible = true
    },
    closeDepartDialog (depart) {
      this.form.departName = depart.label
      this.form.departId = depart.id
      this.dialogDepartVisible = false
    },
    resetTemp () {
      this.form = {
        path: undefined,
        serviceId: undefined,
        url: undefined,
        retryable: 0,
        enabled: 0,
        stripPrefix: 0
      }
    },
    handleUpdate (props) {
      getObj(props.row.id)
        .then(response => {
          this.form = response.data
          this.dialogFormVisible = true
          this.dialogStatus = 'update'
        })
    },
    getList (params) {
      this.listLoading = true
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        })
    },
    create (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form)
            .then(() => {
              this.dialogFormVisible = false
              this.getList()
              this.$Notice.success({
                title: '成功',
                desc: '添加成功'
              })
            })
        } else {
          return false
        }
      })
    },
    update (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          putObj(this.form.id, this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$Notice.success({
              title: '成功',
              desc: '修改成功'
            })
          })
        } else {
          return false
        }
      })
    },
    cancel (formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    handleAdd () {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleDelete (params) {
      delObj(params.row.id)
        .then(() => {
          this.$Notice.success({
            title: '成功',
            desc: '删除成功'
          })
          this.getList()
        })
    },
    changeRetryable (status) {
      this.form.retryable = status
    },
    changeEnabled (status) {
      this.form.enabled = status
    },
    changeStripPrefix (status) {
      this.form.stripPrefix = status
    }
  }
}
</script>
